<template>
  <view class="category">
    <cl-nav-bar leftIcon=""></cl-nav-bar>
    <!-- <view class="search">
      <uni-search-bar placeholder="请输入关键字查询" />
    </view> -->
    <view class="content">
      <view class="content_left">
        <view
          v-for="(item, index) in parentClassifyList"
          :key="index"
          class="p_30"
          :class="{ content_left_active: activeParentClassifyId === item.id }"
          @click="parentClassifyChange(item)"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="content_right">
        <view class="category_son">
          <view
            v-for="item in sonClassifyList"
            :key="item"
            :class="[
              'category_son_item',
              item.id === activeSonClassifyId && 'category_son_item_active',
            ]"
            @click="sonClassifyChange(item)"
            >{{ item.name }}</view
          >
        </view>
        <view class="goods_list" v-if="goodsList.length > 0">
          <view
            class="goods_list_item"
            v-for="(item, index) in goodsList"
            :key="index"
            @click="_toPage('/pages/goods/detail?id=' + item.id)"
          >
            <image
              class="goods_list_item_image"
              :src="item.homeImgUrl"
              mode="aspectFill"
            />
            <view class="goods_list_item_info">
              <text class="goods_list_item_info_name exceed_omit_1">{{
                item.name
              }}</text>
              <view class="goods_list_item_info_des exceed_omit_2">{{
                item.des
              }}</view>
              <view
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <!-- <view class="goods_list_item_info_label">
                  <text
                    v-for="itm in item.labels"
                    :key="itm"
                    class="goods_list_item_info_label_item"
                    >{{ itm }}</text
                  >
                </view> -->
                <view class="goods_list_item_info_price"
                  >￥{{ item.showPrice }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view v-else class="no_data_tip">
          <image
            src="../../../static/images/common/empty_data.png"
            mode="aspectFit"
            class="w_200 h_200 mb_10"
          />
          <text>暂无数据</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted } from 'vue'

const parentClassifyList = ref([])
const sonClassifyList = ref([])
const activeParentClassifyId = ref('')
const activeSonClassifyId = ref('')
const goodsList = ref([])

// 获取分类
const getClassifyList = async () => {
  parentClassifyList.value = await uni.request({
    url: '/shop/goodsClassifyController/listOpen',
    method: 'GET',
    resField: 'data',
    data: {
      pageSize: -1,
      pageNum: 1,
    },
  })
}
// 点击父级分类
const parentClassifyChange = (item) => {
  activeParentClassifyId.value = item.id
}
// 点击子集分类
const sonClassifyChange = (item) => {
  activeSonClassifyId.value = item.id
}

// 根据选择的子类id获取商品列表
const getGoodsListBySonClassifyId = (id) => {
  uni
    .request({
      url: '/shop/goodsController/listOpen',
      method: 'GET',
      resField: 'data',
      data: {
        goodClassifyId: id,
      },
    })
    .then((res) => {
      goodsList.value = res
    })
}

// 监听父级分类变化
watch(
  () => activeParentClassifyId.value,
  (newV) => {
    let curParentClassifyData = parentClassifyList.value.find(
      (item) => item.id === newV
    )
    if (curParentClassifyData) {
      sonClassifyList.value = curParentClassifyData.children || []
      if (sonClassifyList.value.length > 0) {
        activeSonClassifyId.value = sonClassifyList.value[0]['id']
      }
    }
  }
)

// 监听子集分类变化
watch(
  () => activeSonClassifyId.value,
  (newV) => {
    if (newV) {
      getGoodsListBySonClassifyId(newV)
    } else {
      goodsList.value = []
    }
  }
)

onLoad(async (options) => {
  await getClassifyList()
  const { classifyId } = options || { classifyId: undefined }
  // 如果有传入的分类id则直接选中该分类
  if (classifyId) {
    activeParentClassifyId.value = classifyId
  } else {
    // 如果没有分类则直接选择第一个分类
    if (parentClassifyList.value.length > 0) {
      activeParentClassifyId.value = parentClassifyList.value[0]['id']
    }
  }
})
</script>

<style lang="scss" scoped>
.category {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .search {
    background-color: #fff;
  }
  .content {
    flex: 1;
    display: flex;
    overflow: hidden;
    &_left {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
      width: 180rpx;
      flex-shrink: 0;
      font-size: 28rpx;
      &_active {
        position: relative;
        color: #81a9f0;
        background-color: #fff;
      }
      &_active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 40rpx;
        background-color: #81a9f0;
      }
    }
    &_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background-color: #fff;
      .category_son {
        padding: 10rpx 20rpx;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        overflow-x: auto;
        &_item {
          margin-right: 20rpx;
          padding: 10rpx;
          flex-shrink: 0;
          border-radius: 6rpx;
          background-color: ghostwhite;
        }
        &_item_active {
          color: #81a9f0;
          background-color: #e7edff;
        }
      }
      .goods_list {
        padding: 20rpx;
        box-sizing: border-box;
        // flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        &_item {
          display: flex;
          margin-bottom: 20rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          background-color: ghostwhite;
          &_image {
            width: 150rpx;
            height: 150rpx;
            flex-shrink: 0;
          }
          &_info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 20rpx;
            &_name {
              font-size: 28rpx;
            }
            &_des {
              font-size: 24rpx;
            }
            &_label {
              display: flex;
              &_item {
                margin-right: 10rpx;
                font-size: 22rpx;
                border-radius: 6rpx;
                background: #81a9f0;
                color: #fff;
                padding: 2rpx 4rpx;
                box-sizing: border-box;
                flex-shrink: 0;
              }
            }
            &_price {
              font-size: 34rpx;
              color: #ff5000;
            }
          }
        }
      }
      .no_data_tip {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #b0b0b0;
      }
    }
  }
}
</style>
